<template>
  <div style="width: 100%;height:100%" >
    <div class="new-fl">
<!--      <div class="news"><span class="one">通知</span>这期合同这期合同这期合同这期合同这期合同这期合同<span class="two">预警</span>这期合同这期合同这期合同这期合同这期合同这期合同这期合同这期合同这期合同这期合同这期合同这期合同</div>-->
    </div>
    <div id="main" style="width: 100%;height:95%"></div>
     <div class="dl-register" v-if="dialogVisible">
        <div class="register">
          <div class="line">
            <div class="pl">
              <span class="title">
                <img src="@/assets/news/title.png" alt="">&nbsp;&nbsp;消防信息
              </span>
              <span class="close" @click="dialogVisible = false">X</span>
            </div>
            <div class="form-ct">
                 <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
                <div class="endBtn" @click="getCarData(2)"><i class="el-icon-delete"></i>消防结束</div>
            </div>
          </div>
            <div class="list">
              <ul>
                <li v-for="(item,i) in dataList" :key="i">
                  <div class="title-content">
                    <span class="left">{{ item.fireDate }}</span>
<!--                    刘奥旸操作-->
                    <span class="right">
                      <span class="switch" @click="getTiemData(item)">
                        <!-- <span class="title">消防</span>
                        <el-switch
                          v-model="isAlarm"
                          active-color="#56fefe"
                          inactive-color="#999">
                        </el-switch> -->
                        <i class="el-icon-bell"></i>消防开启
                      </span>
                      <span class="tap" @click="openImage(item.gpsCoordinates)"><img src="@/assets/news/map.png" alt="" >&nbsp;&nbsp;地图&nbsp;&nbsp;</span>
                      <span class="tap" @click="lay(item.cameraId)"><img src="@/assets/news/ract.png" alt="">&nbsp;&nbsp;查看摄像头</span>
<!--                      <button @click="lay" >测试打开视频</button>-->
<!--                        <video id="videoElement" controls></video>-->


                      <!-- 按钮 -->
<!--                      <button>打开地图</button>-->
                      <!-- 测试打开视频按钮 -->
<!--                        <button @click="lay">测试打开视频</button>-->

<!--                                          &lt;!&ndash; 关闭推流按钮 &ndash;&gt;-->
<!--                        <button v-if="isVideoVisible" @click="lay_close">关闭推流</button>-->

                                          <!-- 视频播放器 -->


                    </span>
<!--                    <span class="right"><img src="@/assets/news/map.png" alt="">&nbsp;&nbsp;地图&nbsp;&nbsp;<img src="@/assets/news/ract.png" alt="" >&nbsp;&nbsp;查看摄像头</span>-->
                  </div>
                  <div class="content" >
                    <div>
                      <div>报警位置：{{ item.alarmLocation }}</div>
                      <div>报警级别：{{ item.alarmLevel}}</div>
                      <div>消防处理人：{{ item.handlerName }}</div>
                      <div>物业姓名：{{ item.propertyName }}</div>
                      <div>维护人姓名：{{ item.maintainerName}}</div>
                    </div>
                    <div>
                      <div>报警车位号：{{ item.alarmParkingSpot }}</div>
                      <div>当前温度：{{ item.currentTemperature }}</div>
                      <div>消防处理人电话：{{ item.handlerContact }}</div>
                      <div>物业电话：{{ item.propertyContact }}</div>
                      <div>维护人电话：{{ item.maintainerContact }}</div>
                    </div>
                  </div>
                </li>
              </ul>

            </div>
        </div>
       <iframe v-if="src" :src="src"></iframe>
       <div class="video-container" id="videoContainer" style="left: 62%;
    top: 55%;
    bottom: 0;
    height: 300px;
    width: 550px;
    position: absolute;display: none"  >
         <span @click="lay_close" style="color: #ffffff;float: right">X</span>
         <video id="videoElement" width="100%" height="90%"  controls></video>
       </div>

    </div>

    <!-- 新增弹窗1 / 选择车辆 -->
    <div class="dl-register" v-if="isShowSelectCar">
      <div class="register selectCar">
        <div class="top">
          <div class="title">
            <img src="@/assets/news/title.png" alt="">&nbsp;&nbsp;选择车辆
          </div>
          <div class="close" @click="isShowSelectCar = false">X</div>
        </div>
        <div class="body">
          <div class="center">
            <div class="left">操作秘钥</div>
            <el-input class="right" v-model="user_key" size="small" placeholder="请输入内容"></el-input>
          </div>
          <div class="bottom">
            <div class="heard">
              <div class="li1">车棚ID</div>
              <div class="li2">车辆位置</div>
              <div class="li3">报警级别</div>
              <div class="li4">消防处理人</div>
            </div>
            <div class="dataList">
              <div @click="currentSelectCarIndex = index" class="dataItem" :class="{'active': currentSelectCarIndex === index}" v-for="(item, index) in carData" :key="index">
                <div class="li1">{{ item.chargingPileId }}</div>
                <div class="li2">{{ item.location }}</div>
                <div class="li3">{{ item.maintainerName }}</div>
                <div class="li4">{{ item.handlerName }}</div>
              </div>
            </div>
          </div>
          <div class="btns">
            <div class="btn1" @click="isShowSelectCar = false">取消</div>
            <div class="btn2" @click="onSubmitCar">提交</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增弹窗2 / 选择时间 -->
    <div class="dl-Time" v-if="isShowSelectTime">
      <div class="selectTime">
        <div class="top">
          <div class="title">
            消防管理
          </div>
          <div class="close" @click="isShowSelectTime = false">X</div>
        </div>
        <div class="body">
          <div class="bottom">
            <el-checkbox-group v-model="checkedTimes" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="(item, index) in timeData" :label="item.key" :key="city">{{item.key}}口</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="btns">
            <div class="btn1" @click="isShowSelectTime = false">取消</div>
            <div class="btn2" @click="onSubmitTime">提交</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import flvjs from 'flv.js';
import axios from 'axios';
//引入省、市 json文件，后面要通过这个json文件请求指定getjson文件
import shengJSON from './../../../../public/mapJSON/sheng.json'
import shiJSON from './../../../../public/mapJSON/shi.json'
// 34个省、市、自治区的名字拼音映射数组
var provinces = shengJSON //省
var cityMap = shiJSON // 市
// 直辖市和特别行政区没有三级地图
var special = ['北京市', '天津市', '上海市', '重庆市', '香港特别行政区', '澳门特别行政区']

export default {
  name: "hello",
  data() {
    return {
      globalVar: false, // 全局变量，用于触发音频播放
      page:1,
      pageSize:10,
      isVideoVisible: false,  // 控制视频是否显示
      flvPlayer: null,  // 用于保存 FLV 播放器实例

      // 选择车辆对应参数
      isAlarm: false, //消防开关
      isShowSelectCar: false, //是否显示选择车辆
      currentSelectCarIndex: 0, //当前选择车辆下标
      carData: [], //车辆列表
      user_key: '', //用户输入秘钥

      // 选择时间对应参数
      station_id: '', //当前操作id
      timeData: [], //可选时间列表
      checkedTimes: [], //选择的时间列表
      isShowSelectTime: false, //是否显示选择时间
      currentSelectTimeIndex: false, //当前选择时间下标

      //刘奥旸使用的，刘奥旸刘奥旸，别删
      currentRegionId: '', // 定义一个字符串字段
      // 下面是其他数据，不属于刘奥旸范畴
      dataList:[
      ],
      currentPage: 1,
      total:0,
      dialogVisible:false,
      myMapChart: undefined,
      // 初始化绘制全国地图配置
      option: {
        // backgroundColor: '#404a59',
        title: {
          text: '',
          left: 'center',
           top: '12%', // 标题距离顶部的距离
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei'
          },
          subtextStyle: {
            color: '#ffffff',
            fontSize:14,
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei',
          }
        },
        // 鼠标悬停显示信息
        tooltip: {
          trigger: 'item',
          // formatter: function(params) {
          //   return (
          //     params.seriesName + "<br />" + params.name + "：" + params.value
          //   )
          // }
        },
        animationDuration: 1000,
        animationEasing: 'cubicOut',
        animationDurationUpdate: 1000,
        src:'',
      },
      dataMapList:[]
    }
  },
  watch:{
    src(value){
      console.log(value)
    },

  },
  created() {
    this.getgps()
    this.getCarData(1)
  },
  mounted() {
    this.globalVar = true
    // 获取容器初始化echarts并接收echarts对象
    this.myMapChart = echarts.init(document.getElementById('main'))
    // 初始化地图
    this.getList(this.page,this.pageSize)
    this.$forceUpdate()

  },
  methods: {
    getgps(){
      axios.post(`${this.$httpUrl}get_GPS_data`).then(response => {
        this.dataMapList = response.data.data;
        this.init()
        console.log(response.data.data)
      })
    },
    getList(page,pageSize){
      axios.get(`${this.$httpUrl}fire_alarm?pageSize=${pageSize}&page=${page}`).then(response => {
        this.dataList=response.data.data
        this.total=response.data.total
      })
    },
    // 获取车辆数据
    getCarData(type){
      if(type === 2){
        this.isShowSelectCar = true;
      }
      axios.post(`${this.$httpUrl}cancel_fire_alarm_list`).then(response => {
        this.carData = response.data.data;
      })
    },
    // 提交车辆
    onSubmitCar(){
      if(!this.carData[this.currentSelectCarIndex]){
        this.$message({
          message: '没有可提交数据',
          type: 'warning'
        });
        return
      }
      if(!this.user_key){
        this.$message({
          message: '请输入操作秘钥',
          type: 'warning'
        });
        return
      }
      axios.post(`${this.$httpUrl}fire_alarm_stop?station_id=${this.carData[this.currentSelectCarIndex].chargingPileId}&user_key=${this.user_key}`).then(response => {
        if(response.data.code == 200){
          this.isShowSelectCar = false;
          this.$message({
            message: response.data.data,
            type: 'success'
          });
        }else{
          this.$message({
            message: response.data.data,
            type: 'warning'
          });
        }
      })
    },
    // 选择日期监听
    handleCheckedCitiesChange(e){
      const uniqueArr = Array.from(new Set(e));
      this.checkedTimes = uniqueArr;
    },
    // 获取时间数据
    getTiemData(item){
      this.station_id = item.station_id;
      axios.post(`${this.$httpUrl}water_valve_status?station_id=${item.station_id}`).then(response => {
        let timeData = response.data.data;
        this.timeData = Object.entries(timeData).map(([key, value]) => {
          if(value == 1){
            this.checkedTimes.push(key)
          }
          // 在这里处理每个键值对
          return { key, value }; // 例如，创建一个新对象，包含原键值和加倍的值
        });
        this.isShowSelectTime = true;
      })
    },
    // 消防开启提交 - 日期
    onSubmitTime(){
      if(!this.checkedTimes.length){
        this.$message({
          message: '请选择要开启的口',
          type: 'warning'
        });
        return
      }
      const uniqueArr = Array.from(new Set(this.checkedTimes));
      axios.post(`${this.$httpUrl}fire_alarm_start`,{
        station_id: this.station_id,
        alarm_parking_spot_list: uniqueArr
      }).then(response => {
        if(response.data.code == 200){
          this.isShowSelectTime = false;
          this.$message({
            message: response.data.data,
            type: 'success'
          });
        }else{
          this.$message({
            message: response.data.data,
            type: 'warning'
          });
        }
      })
    },
    openDetail(){
      this.page = 1; // 也可以重置到第一页
      this.getList(this.page, this.pageSize); // 获取最新数据
      this.dialogVisible=true

    },
    //打开地图
    openImage(location) {
      const imageUrl =
          `https://restapi.amap.com/v3/staticmap?location=${location}&zoom=16&scale=2&size=300*150&markers=mid,,A:${location}&key=164731c70c93b8e15768966d293fce2c`;
      if(!this.src){
        this.$nextTick(()=>{
          this.src=imageUrl
        })
      }else{
        this.$nextTick(()=>{
          this.src=''
        })
      }
      this.$forceUpdate()
    },
    lay(cameraId){

      // 发送 GET 请求，获取 FLV 视频地址
      // axios.get(`http://localhost:8080/lay/getvideo?station_id=${cameraId}`)  // 这里的 URL 根据实际情况调整
      axios.get(`${this.$httpUrl}getvideo?station_id=${cameraId}`)  // 这里的 URL 根据实际情况调整
          .then(response => {
            // 假设返回的 FLV 视频地址存在于 response.data.url 中
            const flvUrl = response.data;
              console.log(flvUrl)
            if(flvUrl.code==500){
                alert('没有视频！')
            }else{
            // 检查浏览器是否支持 flv.js
            if (flvjs.isSupported()) {
              // 获取 video 元素
              const videoElement = document.getElementById('videoElement');
              const videoContainer=document.getElementById('videoContainer')
              videoContainer.style.display='block'
              // 创建 FLV 播放器
              const flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: flvUrl  // 使用从后端获取的 URL
              });

              // 绑定 video 元素
              flvPlayer.attachMediaElement(videoElement);

              // 加载并播放视频
              flvPlayer.load();
              flvPlayer.play();

              this.isVideoVisible = true;//打开视频，刚刚测试
            } else {
              alert('您的浏览器不支持播放 FLV 视频，请使用支持 FLV 播放的浏览器。');
            }
            }
          })
          .catch(error => {
            console.error('获取视频地址失败:', error);
            alert('获取视频地址失败，请稍后再试。');
          });
    },
    lay_close(){
      // 发送 GET 请求到删除视频接口
      axios.get('${this.$httpUrl}deletevideo')
      // axios.get('http://localhost:8080/lay/deletevideo')
          .then(response => {
            // 请求成功时的处理
            console.log('删除视频成功:', response.data);
            // alert('视频删除成功');
            const videoContainer=document.getElementById('videoContainer')
            videoContainer.style.display='none'
          })
          .catch(error => {

            const videoContainer=document.getElementById('videoContainer')
            videoContainer.style.display='none'
            // 请求失败时的处理
            console.error('删除视频失败:', error);
            // alert('删除视频失败，请稍后再试');
          });
    },
    openVideoInNewWindow() {
      console.log("111111111111")
      alert(1)

    },
    handleSizeChange(val) {
      this.pageSize=val
      this.getList(this.page,this.pageSize)
      },
      handleCurrentChange(val) {
      this.page=val
        this.getList(this.page,this.pageSize)
      },
    /* 初始化地图 */
    init() {

      // 这是组件开始初始化时需要拉去的数据--中国地图的数据
      axios.get("/mapJSON/china.json").then(res => {
        // 获取所有省份
        let shengAll = this.getChildMap(res.data)
        console.log(res.data.name)
        // 注册大地图
        echarts.registerMap('china', res.data)
        // 绘制地图
        this.renderMap('china', shengAll)
        // 绑定点击地图区域事件
        this.myMapChart.on('click', this.clickMap)
      })
    },
    /* 地区区域点击事件 */
    clickMap(params) {
      // 点击省级显示市级
      if (params.name in provinces) {
        console.log("省：" + params.name);
        //进入刘奥旸操作区域
        this.currentRegionId = params.name; // 更新省 ID
        this.$emit('update-region-id', this.currentRegionId); // 发送事件
        //刘奥旸操作区域结束
        // console.log("省 ID:", provinces[params.name]); // 输出当前省的 ID
        axios.get('/mapJSON/province/' + provinces[params.name] + '.json').then(res => {
          echarts.registerMap(params.name, res.data);
          let shiAll = this.getChildMap(res.data);
          console.log(shiAll)
          this.renderMap(params.name, shiAll);
        });
      } else if (params.seriesName in provinces) {
        // 点击市级显示县级
        console.log("市：" + params.name);

        console.log("市 ID:", cityMap[params.name]); // 输出当前市的 ID
        //刘奥旸操作
        this.currentRegionId = cityMap[params.name]; // 更新省 ID
        this.$emit('update-region-id', this.currentRegionId); // 发送事件
        //刘奥旸结束
        if (special.indexOf(params.seriesName) >= 0) {
          this.renderMap('china');
        } else {
          axios.get('/mapJSON/city/' + cityMap[params.name] + '.json').then(res => {
            echarts.registerMap(params.name, res.data);
            let xianAll = this.getChildMap(res.data);
            this.renderMap(params.name, xianAll);
          });
        }
      } else {
        // 点击县级时返回大图
        console.log("县级或其他区域点击，返回大图");
        this.renderMap('china');
        //刘奥旸操作开始
        this.currentRegionId = '100000'; // 更新省 ID
        this.$emit('update-region-id', this.currentRegionId); // 发送事件
        this.getgps()
        //刘奥旸操作结束
      }
      // // 点击省级显示市级
      // if (params.name in provinces) {
      //   console.log("省：" + params.name)
      //   axios.get('/mapJSON/province/' + provinces[params.name] + '.json').then(res => {
      //     // 注册省级地图
      //     echarts.registerMap(params.name, res.data)
      //     // 获取当前省下所有市
      //     let shiAll = this.getChildMap(res.data)
      //     this.renderMap(params.name, shiAll)
      //   })
      // } else if (params.seriesName in provinces) {
      //   // 点击市级显示县级
      //   console.log("市：" + params.name)
      //   if (special.indexOf(params.seriesName) >= 0) { //直辖市和特别行政区没有下级了，返回大图
      //     this.renderMap('china')
      //   } else {
      //     axios.get('/mapJSON/city/' + cityMap[params.name] + '.json').then(res => {
      //       // 注册市级地图
      //       echarts.registerMap(params.name, res.data)
      //       // 获取当前市下所有县
      //       let xianAll = this.getChildMap(res.data)
      //       this.renderMap(params.name, xianAll)
      //       return
      //     })
      //   }
      // } else {
      //   // 点击县级时返回大图
      //   this.renderMap('china')
      // }
    },
    /* 获取下级所有地名 */
    getChildMap(data) {
      let childMapAll = []
      // value为鼠标悬停地名显示的数据
      for (var i = 0; i < data.features.length; i++) {
        childMapAll.push({
          name: data.features[i].properties.name,
          value: 0
        })
      }
      return childMapAll
    },
    /* 修改echarts配置重新渲染地图
      map:地图名
      data:[{name:'',value:0}] value为鼠标悬停地名显示的数据
    */
    renderMap(map, data) {
      // 标题
      this.option.title.subtext = map=='china'?'中国':map
             var dataList = [{
        name: '郑州',
        value: 100 //扩散的大小
    },
    {
        name: '北京',
        value: 100
    },
    {
        name: '香港',
        value: 100
    },
    {
        name: '上海',
        value: 100
    },
];
      var path='image://'+require('@/assets/point.png')
var geoCoordMap = {
    '郑州': [113.649638, 34.75659],
    '香港': [114.186133, 22.29343],
    '北京': [116.395645, 39.92998],
    '上海': [121.487884, 31.24910]
};

var convertData = function(data) {
    console.log(data)
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    console.log(res,'res')
    return res;
};
if(map=='china'){
   this.option.series = [
        {
          name: map,
          type: 'map',
          mapType: map,
          center: [104.1954, 35.8617],
          zoom:1.3,
          roam: true, //禁止缩放平移，开启缩放平移下钻时会出现显示问题
          data: data,
           markPoint: {
            symbol: path, // 标记点形状
             symbolSize: [10, 15], // 图片大小
             label: {
               show: false // 不显示标签
             },
            data: this.dataMapList
        },
          nameMap: {
            china: '中国'
          },
          // 显示区域地名
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#999',
                fontSize: 10
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 13
              }
            }
          },
          itemStyle: {
            normal: {
                    borderColor: 'rgba(147, 235, 248, 1)',
                    borderWidth: 1,
                    areaColor: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(128, 217, 248, 1)',
                    // shadowColor: 'rgba(255, 255, 255, 1)',
                    shadowOffsetX: -2,
                    shadowOffsetY: 2,
                    shadowBlur: 10
                },
                emphasis: {
                    areaColor: '#389BB7',
                    borderWidth: 0
                }
          }
        }
      ]
}else{
   this.option.series = [
        {
          name: map,
          type: 'map',
          mapType: map,
          roam: true, //禁止缩放平移，开启缩放平移下钻时会出现显示问题
          data: data,
           markPoint: {
            symbol:path, // 标记点形状
             symbolSize: [20, 20], // 图片大小
             label: {
               show: false // 不显示标签
             },
            data: this.dataMapList
        },
          nameMap: {
            china: '中国'
          },
          // 显示区域地名
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#999',
                fontSize: 10
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 13
              }
            }
          },
          itemStyle: {
            normal: {
                    borderColor: 'rgba(147, 235, 248, 1)',
                    borderWidth: 1,
                    areaColor: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(128, 217, 248, 1)',
                    // shadowColor: 'rgba(255, 255, 255, 1)',
                    shadowOffsetX: -2,
                    shadowOffsetY: 2,
                    shadowBlur: 10
                },
                emphasis: {
                    areaColor: '#389BB7',
                    borderWidth: 0
                }
          }
        }
      ]
}


      // 重新渲染echarts
      this.myMapChart.setOption(this.option,true)


    //   this.myMapChart.on('click',  (params)=> {
    //   if (params.componentType === 'markPoint') {
    //         this.dialogVisible=true
    //     }
    // });




    },
    /* 手动打开指定区域
      name:地图名
      seriesName:上级地图名
    */
    nextMap(){
      this.clickMap({
        name:'长沙市',
        seriesName:'湖南省'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.dl-register {
    background-color: rgba(0,0,0,0.5);
    /* 使用固定定位让元素撑满全屏 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    .pl{
      text-align: left;
      background: url('./../../../assets/news/bg.png') no-repeat;
      background-size: 100% 100%;
      padding: 0 20px;
      height: 0.35rem;
      line-height: 0.35rem;
    }
    .title{

      color: #ffffff;
      font-weight: bold;
      font-size: 0.16rem;
      position: relative;
      top: -0.05rem;
      img{
        position: relative;
        top: 0.05rem;
      }
    }
    .close{
      float: right;
      color: #ffffff;
      font-size: 0.16rem;
      cursor: pointer;
    }
    .line{
      border-bottom: 1px solid #2e908f;
    }
    .form-ct{
      position: relative;
      top: 0.06rem;
      display: flex;
      justify-content: space-between;
      padding: 0 30px;

      .endBtn{
        font-size: 0.16rem;
        color: #56fefe;
        padding-top: 6px;
        cursor: pointer;
      }
    }
}
/* 登录窗口 */
.dl-register{
  animation: alarm 1s linear infinite;
}
@keyframes alarm {
  0% {box-shadow: 0 0 60px #ff0000;}
  50% {box-shadow: 0 0 120px #ff0000, inset 0 0 120px #ff0000;}
  100% {box-shadow: 0 0 60px #ff0000;}
}
.dl-register .register {
  width: 50%;
  height: 550px;
  background-color: #071d1f;
  position: absolute;
  top: 20%;
  /* bottom: 0; */
  left: 10%;
  /* right: 0; */
  margin: auto;
  border-radius: 5px;
  z-index: 100;
}
.list{
  height: 450px;
  ul{
    height: 100%;
    overflow: auto;
    li{
      margin: 0.2rem;
      padding: 0.1rem;
      background: #102527;
      border-radius: 0.1rem;
      color: #677475;
      font-size: 0.12rem;
      .title-content{
        height: 0.3rem;
        line-height: 0.3rem;
        border-bottom: 1px solid #283b3d;
        text-align: left;
        .left{

        }
        .right{
          float:right;
          position: relative;
          color: #56fefe;
          display: flex;

          .tap{
            cursor: pointer;
            margin-left: 20px;
          }

          .switch{
            // display: flex;
            // margin-top: 4px;

            // .title{
            //   font-size: 0.12rem;
            //   padding-right: 6px;
            // }
            font-size: 0.12rem;
            color: #56fefe;
            cursor: pointer;
          }
        }
      }
      .content{
        display: flex;
        text-align: left;
        >div{
          flex:1;
          >div{
            height: 0.3rem;
            line-height: 0.3rem;
          }
        }
      }
    }
  }
}
/* 自定义滚动条样式 */
.list ul::-webkit-scrollbar {
  width: 5px; /* 设置滚动条宽度 */

}

.list ul::-webkit-scrollbar-thumb {
  background-color: #3a9899; /* 滚动条颜色 */
  border-radius:20px; /* 圆角效果 */
}

.list ul::-webkit-scrollbar-thumb:hover {
  background-color: #3a9899; /* 悬停时颜色 */
}

.list ul::-webkit-scrollbar-track {
  background: #203435; /* 滚动条轨道颜色 */
}
.new-fl{
  overflow: hidden;
  height:0.3rem;
  position: relative;
  top: 0.2rem;
}
.news{
  height: 0.3rem;
  color:#ffffff;
  line-height: 0.3rem;
  font-size: 0.12rem;


  .one{
    background: url('./../../../assets/home/1.png') no-repeat;
    padding: 0 0.1rem;
  }
  .two{
    background: url('./../../../assets/home/2.png') no-repeat;
    padding: 0 0.1rem;
    margin-left: 0.15rem;
  }
}
.news {
    animation: marquee 15s linear infinite; /* 添加动画 */
}

/* 定义动画 */
@keyframes marquee {
    0% {
        transform: translate(0, 0); /* 从初始位置开始 */
    }
    100% {
        transform: translate(-100%, 0); /* 移动到左侧 */
    }
}
iframe{
  position: absolute;
  left: 62%;
  top: 20%;
  bottom: 0;
  height: 300px;
  width: 550px;
}


.dl-Time{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;

  .selectTime{
    border-radius: 5px;
    font-size: 0.12rem;
    height: 200px !important;
    width: 400px;
    background: #102527;
    
    .close{
      cursor: pointer;
    }

    .top{
      border-radius: 5px 5px 0 0;
      padding: 10px;
      width: calc(100% - 20px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: white;
      background-color: #2e908f;
    }

    .body{
      padding: 20px;

      .bottom{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }

      .btns{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;

        .btn1{
          border: #2e908f solid 1px;
          color: #2e908f;
          border-radius: 4px;
          padding: 6px 12px;
          cursor: pointer;
        }

        .btn2{
          color: white;
          border: #2e908f solid 1px;
          background-color: #2e908f;
          border-radius: 4px;
          padding: 6px 12px;
          margin-left: 20px;
          cursor: pointer;
        }
      }
    }
  }
}

.selectCar{
  border-radius: 5px;
  font-size: 0.12rem;

  .close{
    cursor: pointer;
  }

  .top{
    border-radius: 5px 5px 0 0;
    padding: 10px;
    display: flex;
    width: calc(100% - 20px);
    align-items: center;
    justify-content: space-between;
    background: #102527;
  }

  .body{
    padding: 10px;

    .center{
      display: flex;
      align-items: center;

      .left{
        width: 100px;
        color: #999
      }

      .right{width: 300px;}
    }

    .bottom{
      padding: 10px;
      height: 360px;
      margin-top: 20px;
      width: calc(100% - 20px);
      text-align: left;

      .heard,.dataItem{
        display: flex;
        align-items: center;
        line-height: 36px;
        color: #FFF;

        .li1{width: 15%;padding-left: 30px;}
        .li2{width: 55%;}
        .li3{width: 15%;}
        .li4{width: 15%;}
      }

      .heard{background-color: #2e908f;border-radius: 5px 5px 0 0;}
      .dataList{ overflow: auto;height: 325px;border-radius: 0 0 5px 5px;}
      .dataItem{border-bottom: solid 1rpx grey;background-color: #283b3d;}

      .active{background-color: #2e908f !important;}
    }

    .btns{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;

      .btn1{
        border: #2e908f solid 1px;
        color: #2e908f;
        border-radius: 4px;
        padding: 6px 12px;
        cursor: pointer;
      }

      .btn2{
        color: white;
        border: #2e908f solid 1px;
        background-color: #2e908f;
        border-radius: 4px;
        padding: 6px 12px;
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>
